<template>
  <el-drawer v-model="drawerOrder" size="40%">
    <el-table :data="orderData" style="width: 100%" stripe>
      <el-table-column label="商品">
        <template #default="{ row }">
          <p v-for="item in row.productOrder">{{ item.goods_name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template #default="{ row }">
          <p v-for="item in row.productOrder">{{ item.attribute }}</p>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template #default="{ row }">
          <p v-for="item in row.productOrder">{{ item.quantity }}</p>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template #default="{ row }">
          <p v-for="item in row.productOrder">{{ item.totalPrice }}</p>
        </template>
      </el-table-column>
    </el-table>
    <div class="particulars" v-for="(item, index) in orderData" :key="index">
      <div>
        <p>桌号</p>
        <p>{{ item.tableNumber }}</p>
      </div>
      <div>
        <p>用餐人数</p>
        <p>{{ item.diningPartySize }}</p>
      </div>
      <div>
        <p>下单时间</p>
        <p>{{ item.orderTime }}</p>
      </div>
      <div>
        <p>合计总价</p>
        <p>¥{{ item.paymentPrice }}</p>
      </div>
      <div>
        <p>订单号</p>
        <p>{{ item.orderNumber }}</p>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { queryItemOrderRes } from "@/types/index";
const drawerOrder = ref(false);
// 父组件调用打开弹窗并且传值
const openDrawer = (drawerShow: boolean, data: queryItemOrderRes[]) => {
  // console.log(data);
  drawerOrder.value = drawerShow;
  orderData.value = data;
};
defineExpose({ openDrawer });
// 存储订单详情数据
const orderData = ref<queryItemOrderRes[]>([]);
</script>

<style scoped>
.particulars {
  background-color: #f8f8f8;
  margin: 10px 0;
  border-radius: 4px;
  padding: 5px 10px;
}
.particulars p {
  font-size: 15px;
}
.particulars div {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.particulars p:nth-child(1) {
  width: 70px;
}
</style>
